import React, { useState, useRef, useEffect } from "react"
import { isUndefined } from "../utils/index"
import usePrevious from "./usePrevious"

export default function useMergeValue<T>(
    defaultStateValue: T,
    props?: {
        defaultValue?: T,
        value?: T
    }
): [T, React.Dispatch<React.SetStateAction<T>>, T] {
    const { defaultValue, value } = props
    const firstRenderRef = useRef(true)
    const prevPropsValue = usePrevious(value)

    const [stateValue, setStateValue] = useState<T>(value ?? defaultValue ?? defaultStateValue)
    useEffect(() => {
        // 初始化的时候已经在useState里面处理过
        if (firstRenderRef.current) {
            firstRenderRef.current = false
            return
        }
        /**
         * value一开始有值，后来变成了undefined,可能是移除了value值，或者
         * 直接传入undefined 如果有值，在后面直接返回了
         *
         * react18 严格模式下 useEffect 执行2次，可能出现 defaultValue 不生效
         * */
        if (isUndefined(value) && prevPropsValue !== value) {
            setStateValue(value)
        }
    }, [value])
    const mergeValue = isUndefined(value) ? stateValue : value
    return [mergeValue, setStateValue, stateValue]
}